import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DModal, DLookImages } from '@/components'
import { AtButton } from 'taro-ui'
import './usermenberdetail.scss'
import http from '@/api'
export default class UsermenberDetail extends Component {

    constructor(props) {
        super(props)
        this.state = {
            status: 1,
            isModal: false,
            list: [],
            images: [],
            text: '',
            companycar: {
                itemStatus: false,
                itemUrl: ''
            }
        }
    }

    componentWillMount() {
        let { status, id ='' } = this.$router.params
        this.setState({
            status,
            id
        })
        this.myselfDetail()
    }
    reviewEmployee(obj) {
        http.reviewEmployee(obj).then(res => {
            Taro.navigateTo({
                url: `/pages/usermenber/usermenber`
            })
        })
    }
    getStatus(status) {
        return {
            $0: '待审核',
            $1: '审核通过',
            $2: '审核未通过'
        }[`$${status}`]
    }
    myselfDetail() {
        let { id = 1, status } = this.$router.params

        http.myselfDetail({ id: `${id}` }).then(res => {

            let list1 = [
                {
                    name: '个人姓名',
                    value: `${res.imName}`
                },
                {
                    name: '联系方式',
                    value: `${res.imPhone}`
                },
                {
                    name: '申请时间',
                    value: `${res.approUpdateTime}`
                }
            ]
            // let check = res.imIsAppro === 1 ? '审核通过' : '未通过'
            let list2 = [
                {
                    name: '个人姓名',
                    value: `${res.imName}`
                },
                {
                    name: '联系方式',
                    value: `${res.imPhone}`
                },
                {
                    name: '审核状态',
                    value: this.getStatus(res.imIsAppro)
                },
                {
                    name: '审核时间',
                    value: `${res.approUpdateTime}`
                }
            ]
            let img1, img2, img3
            res.fileList.map(item => {
                if (item.cfType === '1') {
                    img1 = item.cfFileUrl
                }
                if (item.cfType === '2') {
                    img2 = item.cfFileUrl
                }
                if (item.cfType === '3') {
                    img3 = item.cfFileUrl
                }
            })
            let images = [
                {
                    img: `${img1}`,
                    text: '名片'
                },
                {
                    img: `${img2}`,
                    text: '身份证正面'
                },
                {
                    img: `${img3}`,
                    text: '身份证反面'
                }
            ]
            let list = status === '3' ? list2 : list1
            this.setState({
                list,
                images,
                creatorId: res.creatorId
            })

        })
    }
    handleRemove() {
        this.setState({
            isModal: true
        })
    }
    handleCancel() {
        this.setState({
            isModal: false,
            isModal2: false
        })
    }
   
    handlerConfirm() {
        this.handleCancel()
        let {id} = this.state
        this.delMyEmp(id)
        //移除员工
    }
    //移除员工接口
    delMyEmp(empId){
        http.delMyEmp({empId}).then(res=>{
            Taro.showToast({
                title:'该员工已从企业移除'
            }).then(()=>{
                setTimeout(()=>{
                    Taro.redirectTo({
                        url:`/pages/usermenber/usermenber`
                    })
                } ,1000)
            })
          
        })
    }
    handleReject() {
        this.setState({
            isModal2: true,
            text: '您是否拒绝该用户加入您的企业?',
            click: 1
        })
    }
    handleAgree() {
        this.setState({
            isModal2: true,
            text: '您是否同意该用户加入您的企业?',
            click: 2
        })
    }
    onHandlerConfirm(click) {
        this.handleCancel()
        let { id } = this.$router.params
        let { creatorId } = this.state
        if (click === 1) {
            let obj = {
                id: `${id}`,
                isAppro: 0,
                creatorId
            }
            this.reviewEmployee(obj)
        }
        if (click === 2) {
            let obj = {
                id: `${id}`,
                isAppro: 1,
                creatorId
            }
            this.reviewEmployee(obj)
        }
    }
    onLookHandle(url, i, arr) {
        if (window.bridge) {
            let _images = []
            arr.map(item => {
                _images.push(item.img)
            })
            window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
        } else {
            this.setState({
                companycar: {
                    ...this.state.companycar,
                    itemStatus: true,
                    itemUrl: url
                }
            })
        }
    }

    onLookItem() {
        this.setState({
            companycar: {
                ...this.state.companycar,
                itemStatus: false,
                itemUrl: ''
            }
        })
    }
    render() {
        const {
            list,
            images,
            status,
            isModal,
            isModal2,
            text,
            click,
            companycar
        } = this.state
        return (
            <View className='b_usermenberdetail'>
                <DNavBar title={'员工详情'}></DNavBar>
                <View className='b_user__detail'>
                    <View className='b_usermenberdetail__list'>
                        {
                            list && list.map((item, i) => {
                                return <View className='b_usermenberdetail__list_item' key={i}>
                                    <Text className='b_usermenberdetail__name'>{item.name}</Text>
                                    <Text className='b_usermenberdetail__value'>{item.value}</Text>
                                </View>
                            })
                        }
                    </View>

                    <View className='b_usermenberdetail__images'>
                        <View className='b_usermenberdetail__images_title'>资料图片</View>
                        <View className='b_usermenberdetail__images_item'>
                            {
                                images && images.map((item, i) => {
                                    return <View className='b_usermenberdetail_item'>
                                        <Image src={item.img} key={i} className='b_usermenberdetail__image' onClick={this.onLookHandle.bind(this, item.img, i, images)}></Image>
                                        <View className='b_usermenberdetail_item__text'>{item.text}</View>
                                    </View>
                                })
                            }
                        </View>
                    </View>
                </View>

                {
                    status === '1' && <View className='b_usermenberdetail__footer'>
                        <AtButton className='item_btn item_btn__display' onClick={this.handleReject.bind(this)}>拒绝加入</AtButton>
                        <AtButton className='item_btn' onClick={this.handleAgree.bind(this)}>同意加入</AtButton>
                    </View>
                }
                {
                    status === '2' && <AtButton className='item_btn b_usermenberdetail__btn' onClick={this.handleRemove.bind(this)}>移除员工</AtButton>
                }
                <DModal
                    isShow={isModal}
                    title='提示'
                    text='是否将该员工移出您的企业？'
                    firstbtn='取消'
                    lastbtn='确定'
                    onCancel={this.handleCancel.bind(this)}
                    onFirst={this.handleCancel.bind(this)}
                    onLast={this.handlerConfirm.bind(this)}
                ></DModal>

                <DModal
                    isShow={isModal2}
                    title='提示'
                    text={text}
                    firstbtn='取消'
                    lastbtn='确定'
                    onCancel={this.handleCancel.bind(this)}
                    onFirst={this.handleCancel.bind(this)}
                    onLast={this.onHandlerConfirm.bind(this, click)}
                ></DModal>
                <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
            </View>
        )
    }
}